<script>
import { reactive, toRefs, ref, onMounted } from "vue";
export default {
  props: {
    tableData: { type: Object, default: {} }, //表格数据
    tableLabel: { type: Array, default: [] }, //表头标签列表
    mapLabel: { type: Object, default: {} }, //字段-标签映射关系列表  {name:'姓名', class:'班级'， ...}
    formDataPost: { type: Array, default: [] }, //增加对话框标签列表
    formDataPut: { type: Array, default: [] }, //修改查对话框标签列表
    formDataGet: { type: Array, default: [] }, //查询对话框标签列表
    total: { type: Number, default: 0 }, //数据总数
    pageSize: { type: Number, default: 10 }, //单页大小
    Upload: { type: Boolean, default: false }, //导入按钮是否启用
    Download: { type: Boolean, default: false }, //导出按钮是否启用
    deleteButton: { type: Boolean, default: false }, //删除按钮是否启用
    deleteAll: { type: Boolean, default: false }, //批量删除是否启用
  },
  emits: [
    "postTableData", //增加
    "deleteTableData", //删除
    "putTableData", //修改
    "getTableData", //查询
    "deleteAllTableData", // 批量删除
    "handleUpload", //导入
    "handleDownload", //导出
    "cell-click", //table点击事件
  ],
  /**
   * postTableData      (form: object) => void
   * deleteTableData    (row: object) => void
   * putTableData       (row: object, form: object) => void
   * getTableData       (currentPage: number, queryKey: string) => void
   * deleteAllTableData (rows: array) => void
   * handleUpload       () => void
   * handleDownload     () => void
   */

  setup(props, { emit }) {
    const tableRef = ref();
    const state = reactive({
      dialogVisible: false,
      queryKey: "",
      dialogTitle: "",
      rowEdit: null,
      dialogFormData: null,
      currentPage: 1,
    });

    //对话框 添加
    const handlePlus = () => {
      state.dialogFormData = {};
      props.formDataPost.forEach((key) => {
        state.dialogFormData[key] = "";
      });
      for (let key in state.dialogFormData) {
        state.dialogFormData[key] = "";
      }
      state.dialogTitle = "添加";
      state.dialogVisible = true;
    };

    //添加数据
    const handleAdd = () => {
      emit("postTableData", state.dialogFormData);
    };

    //批量删除数据
    const handleDeleteAll = () => {
      const SelectionRows = tableRef.value.getSelectionRows();
      emit("deleteAllTableData", SelectionRows);
    };

    //导入
    const handleUpload = () => {
      emit("handleUpload", state.SelectionRows);
    };

    //导出
    const handleDownload = () => {
      emit("handleDownload");
    };

    //模糊查询
    const handleSearch = () => {
      state.currentPage = 1;
      emit("getTableData", state.currentPage, state.queryKey);
    };

    const handleShow = (index, row) => {
      state.dialogFormData = {};
      props.formDataGet.forEach((key) => {
        state.dialogFormData[key] = "";
      });
      for (let key in state.dialogFormData) {
        state.dialogFormData[key] = row[key];
      }
      state.dialogTitle = "查看";
      state.dialogVisible = true;
    };

    const handleEdit = (index, row) => {
      state.dialogFormData = {};
      props.formDataPut.forEach((key) => {
        state.dialogFormData[key] = "";
      });
      for (let key in state.dialogFormData) {
        state.dialogFormData[key] = row[key];
      }
      state.dialogTitle = "编辑";
      state.dialogVisible = true;
      state.rowEdit = row;
    };

    const handleEditConfirm = () => {
      emit("putTableData", state.rowEdit, state.dialogFormData);
    };

    const handleDelete = (index, row) => {
      emit("deleteTableData", row);
    };

    const changePage = (val) => {
      state.currentPage = val;
      emit("getTableData", state.currentPage, state.queryKey);
    };

    const cellClick = (row, column, cell, event) => {
      emit("cell-click", row, column, cell, event);
    };

    onMounted(() => {
      handleSearch()
    })

    return {
      ...toRefs(state),
      tableRef,
      handlePlus,
      handleAdd,
      handleDelete,
      handleUpload,
      handleDownload,
      handleSearch,
      changePage,
      handleShow,
      handleEdit,
      handleDeleteAll,
      handleEditConfirm,
      cellClick,
    };
  },
};
</script>

<template>
  <div class="query-container">
    <div>
      <el-input class="query-input" placeholder="关键词" v-model="queryKey" />
      <el-button type="primary" @click="handleSearch()">
        <el-icon><el-icon-search /></el-icon>
      </el-button>
    </div>
    <div>
      <el-button color="#626aef" v-if="Upload" @click="handleUpload()">
        <el-icon><el-icon-upload /></el-icon>
      </el-button>
      <el-button color="#626aef" v-if="Download" @click="handleDownload()">
        <el-icon><el-icon-download /></el-icon>
      </el-button>
      <el-button v-if="formDataPost.length" type="primary" @click="handlePlus()">
        <el-icon><el-icon-plus /></el-icon>
      </el-button>
      <el-button type="danger" v-if="deleteAll" @click="handleDeleteAll()">
        <el-icon><el-icon-delete /></el-icon>
      </el-button>
    </div>
  </div>

  <!-- 表格 -->
  <el-table ref="tableRef" :data="tableData" stripe style="width: 100%; margin: 10px 0" @cell-click="cellClick">
    <el-table-column type="selection" v-if="deleteAll" />
    <el-table-column v-for="(item, index) in tableLabel" :key="index" :prop="item" :label="mapLabel[item] || item" />

    <el-table-column prop="address" label="操作" width="200px"
      v-if="formDataGet.length || formDataPut.length || deleteButton">
      <template #default="scope">
        <el-button v-if="formDataGet.length" size="small" type="primary" text
          @click="handleShow(scope.$index, scope.row)">查看</el-button>
        <el-button v-if="formDataPut.length" size="small" type="primary" text
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="primary" v-if="deleteButton" text
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <div style="display: flex; justify-content: center">
    <el-pagination background hide-on-single-page layout="prev, pager, next" :total="total" :page-size="pageSize"
      :currentPage="currentPage" @current-change="changePage" />
  </div>

  <!-- 对话框 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle">
    <el-form :model="dialogFormData" label-width="150px">
      <el-form-item v-for="(value, key, index) in dialogFormData" :key="index" :label="mapLabel[key] || key">
        <el-input v-model="dialogFormData[key]" :disabled="dialogTitle === '查看'" />
      </el-form-item>
      <el-form-item v-if="dialogTitle === '添加'">
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </el-form-item>
      <el-form-item v-else-if="dialogTitle === '编辑'">
        <el-button type="primary" @click="handleEditConfirm">修改 </el-button>
        <el-button type="default" @click="dialogVisible = false">
          取消
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped>
.query-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.query-container .query-input {
  width: 200px;
  margin-right: 10px;
}
</style>